<template>
    <div class="container">
        <Row class="btn-action">
        </Row>
        <Table border :columns="tableColumnsPC" :data="fcDataList" size="small" ref="table">
        </Table>
    </div>
</template>

<script>
import { getWDayList, getWPCDayList } from '@/api/yi-qing-fang-kong'
export default {
  name: 'shen-appData-list',
  data () {
    return {
      loadData: true,
      tableColumnsPC: [
        {
          title: '区县',
          key: 'area',
          align: 'center',
          width: 100,
          tooltip: true,
          fixed: 'left'
        },
        {
          title: '黑龙江',
          key: 'hlj',
          align: 'center',
          width: 80,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#F3A94F'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '当日新增',
          key: 'hlj1',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#91908E'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '其中哈尔滨',
          key: 'heb',
          align: 'center',
          width: 110,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#088E81'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '当日新增',
          key: 'heb1',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#96BFFF'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '河南',
          key: 'hn',
          align: 'center',
          width: 80,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#F3A94F'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '当日新增',
          key: 'hn1',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#91908E'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '其中信阳',
          key: 'xy',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#088E81'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '当日新增',
          key: 'xy1',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#96BFFF'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '浙江',
          key: 'zj',
          align: 'center',
          width: 80,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#F3A94F'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '当日新增',
          key: 'zj1',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#91908E'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '其中温州',
          key: 'wz',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#088E81'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '当日新增',
          key: 'wz1',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#96BFFF'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '山东',
          key: 'sd',
          align: 'center',
          width: 80,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#F3A94F'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '当日新增',
          key: 'sd1',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#91908E'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '河北',
          key: 'hb',
          align: 'center',
          width: 80,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#088E81'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '当日新增',
          key: 'hb1',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#96BFFF'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '吉林',
          key: 'jl',
          align: 'center',
          width: 80,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#F3A94F'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '当日新增',
          key: 'jl1',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#91908E'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '北京',
          key: 'bj',
          align: 'center',
          width: 80,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#088E81'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '当日新增',
          key: 'bj1',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#96BFFF'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '广东',
          key: 'gd',
          align: 'center',
          width: 80,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#088E81'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '当日新增',
          key: 'gd1',
          align: 'center',
          width: 100,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#96BFFF'
                }
              }, params.column.title)
            ])
          }
        }
      ],
      fcDataList: [],
      type: '',
      areaArr: ['铁西区', '辽中区', '苏家屯区', '皇姑区', '浑南区', '法库县', '沈河区', '沈北新区', '新民市', '康平县', '大东区', '和平区', '于洪区']
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  watch: {
    $route: function (to, from) {
      console.log(this.$route.query.type, to, '!@!@#@')
      this.type = this.$route.query.type
      this.selectlist()
    }
  },
  methods: {
    selectlist () {
      this.getList()
    },
    getList () {
      if (this.type === 'pc') {
        getWPCDayList({}).then(res => {
          if (res.data.errcode === 0) {
            let tableData = []
            tableData.allList = res.data.data.allList
            tableData.dayallList = res.data.data.dayallList
            let obj = {
              area: '',
              bj1: '',
              gd1: '',
              hb1: '',
              heb1: '',
              hlj1: '',
              hn1: '',
              jl1: '',
              sd1: '',
              wz1: '',
              xy1: '',
              zj1: ''
            }
            let allArr = []
            for (var j = 0; j < 13; j++) {
              obj = {
                area: '',
                bj1: '',
                gd1: '',
                hb1: '',
                heb1: '',
                hlj1: '',
                hn1: '',
                jl1: '',
                sd1: '',
                wz1: '',
                xy1: '',
                zj1: ''
              }
              if (tableData.dayallList[j].area !== tableData.allList[j].area) {
                obj = {
                  area: tableData.allList[j].area,
                  bj1: '0',
                  gd1: '0',
                  hb1: '0',
                  heb1: '0',
                  hlj1: '0',
                  hn1: '0',
                  jl1: '0',
                  sd1: '0',
                  wz1: '0',
                  xy1: '0',
                  zj1: '0'
                }
                tableData.dayallList.splice(j, 0, obj)
              } else {
                obj.area = tableData.dayallList[j].area
                obj.bj1 = tableData.dayallList[j].bj
                obj.gd1 = tableData.dayallList[j].gd
                obj.hb1 = tableData.dayallList[j].hb
                obj.heb1 = tableData.dayallList[j].heb
                obj.hlj1 = tableData.dayallList[j].hlj
                obj.hn1 = tableData.dayallList[j].hn
                obj.jl1 = tableData.dayallList[j].jl
                obj.sd1 = tableData.dayallList[j].sd
                obj.wz1 = tableData.dayallList[j].wz
                obj.xy1 = tableData.dayallList[j].xy
                obj.zj1 = tableData.dayallList[j].zj
              }
              allArr.push(obj)
            }
            let newObj = {}
            newObj.area = tableData.allList[14].area
            newObj.bj1 = tableData.allList[14].bj
            newObj.gd1 = tableData.allList[14].gd
            newObj.hb1 = tableData.allList[14].hb
            newObj.heb1 = tableData.allList[14].heb
            newObj.hlj1 = tableData.allList[14].hlj
            newObj.hn1 = tableData.allList[14].hn
            newObj.jl1 = tableData.allList[14].jl
            newObj.sd1 = tableData.allList[14].sd
            newObj.wz1 = tableData.allList[14].wz
            newObj.xy1 = tableData.allList[14].xy
            newObj.zj1 = tableData.allList[14].zj
            allArr[13] = newObj
            tableData.allList.splice(14, 1)
            this.fcDataList = []
            for (var k = 0; k < tableData.allList.length; k++) {
              var newObj1 = Object.assign(tableData.allList[k], allArr[k])
              this.fcDataList.push(newObj1)
            }
            console.log(this.fcDataList, '13123123')
          } else {
            this.loadData = true
            this.$Notice.error({
              title: '查询列表信息失败',
              desc: res.data.errmsg
            })
          }
        })
      } else if (this.type === 'app') {
        getWDayList({}).then(res => {
          if (res.data.errcode === 0) {
            let tableData = []
            tableData.allList = res.data.data.allList
            tableData.dayallList = res.data.data.dayallList
            let obj = {
              area: '',
              bj1: '',
              gd1: '',
              hb1: '',
              heb1: '',
              hlj1: '',
              hn1: '',
              jl1: '',
              sd1: '',
              wz1: '',
              xy1: '',
              zj1: ''
            }
            let allArr = []
            for (var j = 0; j < 13; j++) {
              obj = {
                area: '',
                bj1: '',
                gd1: '',
                hb1: '',
                heb1: '',
                hlj1: '',
                hn1: '',
                jl1: '',
                sd1: '',
                wz1: '',
                xy1: '',
                zj1: ''
              }
              if (tableData.dayallList[j].area !== tableData.allList[j].area) {
                obj = {
                  area: tableData.allList[j].area,
                  bj1: '0',
                  gd1: '0',
                  hb1: '0',
                  heb1: '0',
                  hlj1: '0',
                  hn1: '0',
                  jl1: '0',
                  sd1: '0',
                  wz1: '0',
                  xy1: '0',
                  zj1: '0'
                }
                tableData.dayallList.splice(j, 0, obj)
              } else {
                obj.area = tableData.dayallList[j].area
                obj.bj1 = tableData.dayallList[j].bj
                obj.gd1 = tableData.dayallList[j].gd
                obj.hb1 = tableData.dayallList[j].hb
                obj.heb1 = tableData.dayallList[j].heb
                obj.hlj1 = tableData.dayallList[j].hlj
                obj.hn1 = tableData.dayallList[j].hn
                obj.jl1 = tableData.dayallList[j].jl
                obj.sd1 = tableData.dayallList[j].sd
                obj.wz1 = tableData.dayallList[j].wz
                obj.xy1 = tableData.dayallList[j].xy
                obj.zj1 = tableData.dayallList[j].zj
              }
              allArr.push(obj)
            }
            let newObj = {}
            newObj.area = tableData.allList[14].area
            newObj.bj1 = tableData.allList[14].bj
            newObj.gd1 = tableData.allList[14].gd
            newObj.hb1 = tableData.allList[14].hb
            newObj.heb1 = tableData.allList[14].heb
            newObj.hlj1 = tableData.allList[14].hlj
            newObj.hn1 = tableData.allList[14].hn
            newObj.jl1 = tableData.allList[14].jl
            newObj.sd1 = tableData.allList[14].sd
            newObj.wz1 = tableData.allList[14].wz
            newObj.xy1 = tableData.allList[14].xy
            newObj.zj1 = tableData.allList[14].zj
            allArr[13] = newObj
            tableData.allList.splice(14, 1)
            this.fcDataList = []
            for (var k = 0; k < tableData.allList.length; k++) {
              var newObj1 = Object.assign(tableData.allList[k], allArr[k])
              this.fcDataList.push(newObj1)
            }
            console.log(this.fcDataList, '13123123')
          } else {
            this.loadData = true
            this.$Notice.error({
              title: '查询列表信息失败',
              desc: res.data.errmsg
            })
          }
        })
      }
    }
  },
  mounted () {
    this.type = this.$route.query.type
    this.selectlist()
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
    .title-style {
      color: red;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .ivu-table-row {
      height: 57px;
    }
    .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
      from { transform: rotate(0deg);}
      50%  { transform: rotate(180deg);}
      to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
      height: 100px;
      position: relative;
      /*border: 1px solid #eee;*/
    }
</style>
